<template>
  <view class="custom-bar">
    <view class="bar-box">
      <view
        class="statusBar"
        :style="{ height: getStatusBarHeight() + 'px' }"></view>
      <view
        class="capsuleBar"
        :style="{
          height: getCapsuleBar().barHeight + 'px',
          left: getLogoBarLeft() + 'px',
        }">
        <view class="title">{{ title }}</view>
        <navigator
          url="/pages/search/search"
          class="search"
          :style="{ height: getCapsuleBar().height + 'px' }">
          <uni-icons class="icon" type="search" size="16"></uni-icons>
          <text class="placeholder">搜索</text>
        </navigator>
      </view>
    </view>

    <!-- 高度占位 -->
    <view
      :style="{
        height: getCustomBarHeight() + 'px',
      }"></view>
  </view>
</template>

<script setup>
import {
  getStatusBarHeight,
  getCapsuleBar,
  getCustomBarHeight,
  getLogoBarLeft,
} from '@/utils/system.js'

defineProps({
  title: {
    type: String,
    default: '壁纸',
  },
})
</script>

<style lang="scss" scoped>
.custom-bar {
  .bar-box {
    width: 100%;
    padding: 0 30rpx;
    position: fixed;
    z-index: 9999;
    background: linear-gradient(to bottom, transparent, #fff 400rpx),
      linear-gradient(to right, #beecd8 20%, #f4e2d8);

    .capsuleBar {
      display: flex;
      align-items: center;

      .title {
        color: $font-color-1;
        font-size: $font-size-3;
        font-weight: 600;
      }

      .search {
        width: 168rpx;
        margin-left: 20rpx;
        height: 56rpx;
        font-size: $font-size;
        color: $font-color-4;
        background-color: $white-color;
        border: 1px solid #dedede;
        border-radius: 100rpx;
        display: flex;
        align-items: center;
        padding: 0 10rpx;
        box-shadow: 0 0 6rpx 2rpx $background-color;

        .icon {
          color: $font-color-4 !important;
          margin-left: 12rpx;
        }
        .placeholder {
          font-size: $font-size;
          padding-left: 10rpx;
        }
      }
    }
  }
}
</style>
